<template>
  <div class="root">
    <div class="myInfo">
      <img class="avatar" :src="myInfo.avatar ? myInfo.avatar : defaultAvatar" @click="toPersonalInfoPage" />

      <div class="nameDecs">
        <div class="name-row">
          <div class="name">
            {{myInfo.nickname}}
          </div>
          <div class="score">
            <img class="small-star" src="../assets/images/small_star.png" alt="">
            <div>
              {{myInfo.score}}
            </div>
          </div>
        </div>
        <div class="desc">{{myInfo.description ? myInfo.description : '这位童鞋比较懒，什么都没写~'}}</div>
      </div>
    </div>

    <div class="databox">
      <div class="dataitem">
        <router-link to="/myfans">
          <img src="../assets/images/center_heart.png" alt="" />
          <p class="title">我的粉丝</p>
          <p class="count">{{myInfo.fansCount}}</p>
        </router-link>
      </div>
      <div class="dataitem">
        <router-link to="/myconcerned">
          <div class="dataicon"><img src="../assets/images/center_focus.png" alt="" /></div>
          <p class="title">关注的人</p>
          <p class="count">{{myInfo.followCount}}</p>
        </router-link>
      </div>
      <div class="dataitem">
        <router-link to="/myvisitors">
          <div class="dataicon"><img src="../assets/images/center_visitor.png" alt="" /></div>
          <p class="title">谁拍过我</p>
          <p class="count">{{myInfo.visitorCount}}</p>
        </router-link>
      </div>
    </div>

    <nav class="navContainer">
      <router-link to="/mywallet">
        <div class="navItem">
          <span>
            <img class="icon" src="../assets/images/center_wallet.png" />
            小钱袋
          </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>

      <router-link to="/secretinfo">
        <div class="navItem">
          <span>
              <img class="icon" src="../assets/images/center_secret.png" />
              神秘资料
          </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>

      <router-link to="/myevaluates">
        <div class="navItem">
          <span>
            <img class="icon" src="../assets/images/center_eval.png" />
            我的评价
          </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>

      <!--
       <router-link to="/inputsecretsignal">
        <div class="navItem">
          <span>
            <img class="icon" src="../assets/images/center_eval.png" />
            输入暗号
          </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>

      <router-link to="/selfie">
        <div class="navItem">
          <span>
                <img class="icon" src="../assets/images/center_eval.png" />
               上传自拍
           </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>

      <router-link to="/inputsecretsignal">
        <div class="navItem">
          <span>
                <img class="icon" src="../assets/images/center_eval.png" />
               线下搭讪暗号
           </span>
          <img class="moreIcon" src="../assets/images/more_icon.png" />
        </div>
      </router-link>-->

    </nav>

  </div>
</template>

<script>
  import defaultAvatar from '../assets/images/default_avatar.png'
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'personalcenter',
    components: {},
    data() {
      return {
        defaultAvatar
      }
    },
    computed: mapState({
      myInfo: (state) => state.myInfo
    }),

    methods: {
      toPersonalInfoPage() {
        this.$router.push('/personaldata');
      }
    }
  }

</script>

<style lang="less">
  /*@import '../assets/less/common.less';*/

  .myInfo {
    padding: 2% 0 0 0;
    background-color: #F5F22B;
    /*height: 150px;*/
    min-height: 25%;
    /*height: 25%;*/
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid #888888;
    .avatar {
      border-radius: 50%;
      border: 1px solid #666666;
      /*width: 80px;*/
      width: 20%;
      height: 20%;
      margin: 0px 6% 0px 10%;
    }
    .nameDecs {
      display: flex;
      flex-direction: column;
      max-width: 55%;
      .name-row {
        display: flex;
        align-items: center;
        /*margin-top: 8px;*/
        margin-bottom: 4px;
        .name {
          font-size: 18px;
          color: #000000;
          margin-right: 8px;
        }
      }
      .desc {
        font-size: 16px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .databox {
    display: flex;
    padding: 2% 0;
    text-align: center;
    background-color: white;
    .dataitem {
      flex: 1;
      display: flex;
      flex-direction: column;
      .title {
        font-size: 14px;
      }
      img {
        /*height: 36px;*/
        width: 25%;
      }
      a {
        color: #000000;
        text-decoration: none;
      }
      .count {
        /*margin-top: 4px;*/
        font-size: 18px;
        color: #9c55a1;
      }
    }
  }

  .navContainer {
    margin-top: 12px;
    background-color: white;
    .navItem {
      box-sizing: border-box;
      /*padding: 0 20px;*/
      padding: 2% 4%;
      /*height: 60px;*/
      width: 100%;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        display: flex;
        align-items: center;
        font-size: 16px;
        .icon {
          width: 36px;
          height: 36px;
          margin-right: 8px;
        }
      }
      .moreIcon {
        width: 20px;
        height: 20px;
      }
    }
    a {
      color: #000000;
      text-decoration: none;
    }
  }

</style>
